import { _decorator, Component, Node, Sprite, Label } from 'cc';
import { BaseView } from '../../../../../scripts/libs/rxjs/cc3/BaseView';
import { ReactiveNumber } from '../../../../../scripts/libs/rxjs/cc3/ReactiveNumber';
import { Color } from 'cc';
import { Colors } from '../../../game/basic';
import { ReactiveProperty } from '../../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { ReactiveBoolean } from '../../../../../scripts/libs/rxjs/cc3/ReactiveBoolean';
import { MergeASAP } from '../../../../../scripts/libs/rxjs/cc3/Merge';
import { ReactiveSet } from '../../../../../scripts/libs/rxjs/cc3/ReactiveSet';
import { SpriteAtlas } from 'cc';
const { ccclass, property, executeInEditMode } = _decorator;

@ccclass('BlockPileView')
@executeInEditMode
export class BlockPileView extends BaseView {

    posId: number = null;
    blockId: number = null;

    animatings = ReactiveSet.Create();

    @property(ReactiveNumber)
    _colorId: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get colorId(): number { return this._colorId.value }
    set colorId(v: number) { this._colorId.Value = v; }

    @property(ReactiveNumber)
    _count: ReactiveNumber = ReactiveNumber.DefaultValue(0);
    @property
    get count(): number { return this._count.value }
    set count(v: number) { this._count.Value = v; }

    @property(ReactiveBoolean)
    _blind: ReactiveBoolean = ReactiveBoolean.DefaultValue(false);
    @property
    get blind(): boolean { return this._blind.value }
    set blind(v: boolean) { this._blind.Value = v; }

    @property(ReactiveBoolean)
    _clickActive: ReactiveBoolean = ReactiveBoolean.DefaultValue(false);
    @property
    get clickActive(): boolean { return this._clickActive.value }
    set clickActive(v: boolean) { this._clickActive.Value = v; }



    // @property(ReactiveNumber)
    // _waitingProgress: ReactiveNumber = ReactiveNumber.DefaultValue(null);
    // @property
    // get waitingProgress(): number { return this._waitingProgress.value }
    // set waitingProgress(v: number) { this._waitingProgress.Value = v; }

    // _targetWaitingProgress: number = null;
    // _overWaitingProgress: number = null;

    @property(Node)
    rootNode: Node = null;

    // @property(Sprite)
    // outerSprite: Sprite = null;

    @property([Sprite])
    mainSprites: Sprite[] = [];

    @property(Sprite)
    blindSprite: Sprite = null;

    // @property(Label)
    // progressLabel: Label = null;

    @property(SpriteAtlas)
    atlas: SpriteAtlas = null;

    useObserves() {
        return [
            MergeASAP(this._colorId, this._count, this._blind, this._clickActive/*, this._waitingProgress*/).subscribe(this.refresh.bind(this)),
        ];
    }

    reset() {
        // this._targetWaitingProgress = 0;
        // this._overWaitingProgress = 0;
        this.animatings.clear();
    }

    refresh() {
        let needOuter = this.clickActive;
        if (this.blind) {
            this.mainSprites.forEach(_ => {
                _.grayscale = true;
                _.spriteFrame = this.atlas.getSpriteFrame(`s/s1${needOuter ? 'o' : ''}`);
            });
            this.blindSprite.node.active = true;
        } else {
            this.mainSprites.forEach(_ => {
                _.grayscale = false;
                _.spriteFrame = this.atlas.getSpriteFrame(`s/s${this.colorId}${needOuter ? 'o' : ''}`);
            });
            this.blindSprite.node.active = false;
        }

        for (let i = 0; i < 3; i++) {
            if (i <= this.count - 1) {
                this.mainSprites[i].node.active = true;
            } else {
                this.mainSprites[i].node.active = false;
            }
        }
        // this.outerSprite.node.active = this.clickActive;




        // if (this.waitingProgress == null) {
        //     this.progressLabel.node.active = false;
        // } else {
        //     this.progressLabel.node.active = true;
        //     this.progressLabel.string = `${this.waitingProgress}/3`;
        // }
    }

}

